<template>
    <div class="app">
        <h3>手机端报工</h3>
        <div class="col" style="margin-top: 100px">
            <div class="loader">
                <div class="box box-1">
                    <div class="side-left"></div>
                    <div class="side-right"></div>
                    <div class="side-top"></div>
                </div>
                <div class="box box-2">
                    <div class="side-left"></div>
                    <div class="side-right"></div>
                    <div class="side-top"></div>
                </div>
                <div class="box box-3">
                    <div class="side-left"></div>
                    <div class="side-right"></div>
                    <div class="side-top"></div>
                </div>
                <div class="box box-4">
                    <div class="side-left"></div>
                    <div class="side-right"></div>
                    <div class="side-top"></div>
                </div>
            </div>
        </div>
        <div class="demo-type">
            <div class="col" @click="handleFetch">
                <el-icon :size="30"><ToiletPaper /></el-icon>
                <span style="margin-top: 10px">取版</span>
            </div>
            <div class="col" @click="handleClick">
                <el-icon :size="30"><Document /></el-icon>
                <span style="margin-top: 10px">报工</span>
            </div>
        </div>
        <div class="demo-type">
            <div class="col" @click="handleSupplementary">
                <el-icon :size="30"><Notebook /></el-icon>
                <span style="margin-top: 10px">补版</span>
            </div>
            <div class="col" >
            </div>
        </div>
    </div>
</template>

<script setup>
import useUserStore from '@/store/modules/user'
import Cookies from 'js-cookie'
import { nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { getById } from '@/api/basicInfo/workbench'
import { encrypt } from '@/utils/jsencrypt'
const userStore = useUserStore()

const route = useRoute()
const router = useRouter()
const workData = ref({})
const login = () => {
    Cookies.set('username', 'admin', { expires: 30 })
    Cookies.set('password', encrypt('admin123'), { expires: 30 })
    // 调用action的登录方法
    userStore
        .login({ username: 'admin', password: 'admin123' })
        .then(() => {
            const query = route.query
            Object.keys(query).reduce((acc, cur) => {
                if (cur !== 'redirect') {
                    acc[cur] = query[cur]
                }
                return acc
            }, {})
            getWorkBranch()
        })
        .catch(() => {})
}

// 根据机台id 查询 机台
const getWorkBranch = () => {
    const id = window.location.href.split('=')[1]
        ? window.location.href.split('=')[1]
        : userStore.workbranchId
    getById({ pid: id }).then(res => {
        workData.value = res.data
    })
}
const handleFetch = () => {
    router.push({
        path: '/fetch',
        // query: {
        //     id: workData.value.pid,
        // },
    })
}
const handleSupplementary = () => {
    router.push({
        path: '/supplementary',
        // query: {
        //     id: workData.value.pid,
        // },
    })
}
const handleClick = () => {
    if (workData.value) {
        if (workData.value.type == 2) {
            // 印刷
            router.push({
                path: '/printReportApp',
                query: {
                    id: workData.value.pid,
                },
            })
        } else if (workData.value.type == 4) {
            // 折页
            router.push({
                path: '/foldingReport',
                query: {
                    id: workData.value.pid,
                },
            })
        } else if (workData.value.type == 5 || workData.value.type == 6) {
            // 裁切
            router.push({
                path: '/cuttingReportApp',
                query: {
                    id: workData.value.pid,
                },
            })
        } else if (workData.value.type == 7) {
            // 覆膜
             // 裁切
             router.push({
                path: '/coverReportApp',
                query: {
                    id: workData.value.pid,
                },
            })
        }
    }
}
if (window.location.href.split('=')[1]) {
    userStore.setWorkbranchId(window.location.href.split('=')[1])
    login()
} else {
    getWorkBranch()
}
// window.open(
//     'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx247b33d2805b997c&redirect_uri=http://47.104.229.186/&response_type=code&scope=snsapi_base&state=1#wechat_redirect'
// )
// console.log(window.location.href);
</script>

<style lang="scss" scoped>
.loader {
    scale: 3;
    height: 50px;
    width: 40px;
}

.box {
    position: relative;
    opacity: 0;
    left: 10px;
}

.side-left {
    position: absolute;
    background-color: #286cb5;
    width: 19px;
    height: 5px;
    transform: skew(0deg, -25deg);
    top: 14px;
    left: 10px;
}

.side-right {
    position: absolute;
    background-color: #2f85e0;
    width: 19px;
    height: 5px;
    transform: skew(0deg, 25deg);
    top: 14px;
    left: -9px;
}

.side-top {
    position: absolute;
    background-color: #5fa8f5;
    width: 20px;
    height: 20px;
    rotate: 45deg;
    transform: skew(-20deg, -20deg);
}

.box-1 {
    animation: from-left 4s infinite;
}

.box-2 {
    animation: from-right 4s infinite;
    animation-delay: 1s;
}

.box-3 {
    animation: from-left 4s infinite;
    animation-delay: 2s;
}

.box-4 {
    animation: from-right 4s infinite;
    animation-delay: 3s;
}

@keyframes from-left {
    0% {
        z-index: 20;
        opacity: 0;
        translate: -20px -6px;
    }

    20% {
        z-index: 10;
        opacity: 1;
        translate: 0px 0px;
    }

    40% {
        z-index: 9;
        translate: 0px 4px;
    }

    60% {
        z-index: 8;
        translate: 0px 8px;
    }

    80% {
        z-index: 7;
        opacity: 1;
        translate: 0px 12px;
    }

    100% {
        z-index: 5;
        translate: 0px 30px;
        opacity: 0;
    }
}

@keyframes from-right {
    0% {
        z-index: 20;
        opacity: 0;
        translate: 20px -6px;
    }

    20% {
        z-index: 10;
        opacity: 1;
        translate: 0px 0px;
    }

    40% {
        z-index: 9;
        translate: 0px 4px;
    }

    60% {
        z-index: 8;
        translate: 0px 8px;
    }

    80% {
        z-index: 7;
        opacity: 1;
        translate: 0px 12px;
    }

    100% {
        z-index: 5;
        translate: 0px 30px;
        opacity: 0;
    }
}
.app {
    padding: 20px;
}
.demo-type {
    margin-top: 100px;
    display: flex;
}
.demo-type > div {
    flex: 1;
    text-align: center;
}

.demo-type > div:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}
.col {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    // text-align: center;
}
h3 {
    color: #008b8b;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-left: 4px solid #ff6347;
    padding-left: 10px;
}
</style>
